<template>
  <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图区域 -->
      <el-card>
        <!-- 搜索与添加区域 -->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
              <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
            </el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="addDialogVisible = true;addForm={}">添加用户</el-button>
          </el-col>
        </el-row>
        <!-- 用户列表区域 -->
        <el-table :data="userlist" style="width: 100%" border stripe>
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="mobile" label="电话"></el-table-column>
          <el-table-column prop="role_name" label="角色"></el-table-column>
          <el-table-column prop="mg_state" label="状态">
            <!-- 作用域插槽 -->
            <template slot-scope="scope">
               <!-- {{scope.row.mg_state}} -->
               <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column  label="操作" width="180px">
               <!-- 作用域插槽 -->
            <template slot-scope="scope">
               <!-- {{scope.row}} -->
               <!-- 修改按钮 -->
               <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
               <!-- 删除按钮 -->
               <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
               <!-- 分配角色按钮 -->
               <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                 <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
               </el-tooltip>
            </template>
          </el-table-column>      
        </el-table>
        <!-- 分页区域 -->
         <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 4, 7, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </el-card>
      <!-- 添加用户得对话框 -->
  <el-dialog
   title="添加用户"
   :visible.sync="addDialogVisible"
   width="50%"
   @close="addDialogClosed">
   <!-- 内容主体区域 -->
  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" >
  <el-form-item label="用户名" prop="name">
    <el-input v-model="addForm.name"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password" >
    <el-input v-model="addForm.password" show-password></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="addForm.email"></el-input>
  </el-form-item>
  <el-form-item label="手机" prop="mobile">
    <el-input v-model="addForm.mobile"></el-input>
  </el-form-item>
  </el-form>
  <!-- 底部按钮区域 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
</el-dialog>

<!-- 修改用户的对话框 -->
<el-dialog
  title="修改用户信息"
  :visible.sync="editDialogVisible"
  width="50%"
  @close="editDialogClosed">
 <!-- 内容主体区域 -->
 <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px" >
  <el-form-item label="用户名">
    <el-input v-model="editForm.name" disabled></el-input>
  </el-form-item>
   <el-form-item label="邮箱" prop="email">
    <el-input v-model="editForm.email"></el-input>
  </el-form-item>
  <el-form-item label="手机" prop="mobile">
    <el-input v-model="editForm.mobile"></el-input>
  </el-form-item>
 </el-form>
  <!-- 底部按钮区域 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editUser">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
export default {
   data(){
      //验证邮箱得规则
       var checkEmail = (rule,value,cb) => {
         //验证邮箱得正则表达式
         const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
         if(regEmail.test(value)){
           //合法得邮箱
           return cb();
         }
         cb(new Error('请输入合法的邮箱'));
       }
       //验证手机号得规则
       var checkMobile = (rule,value,cb) => {
         const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
         if(regMobile.test(value)){
           //合法得邮箱
           return cb();
         }
         cb(new Error('请输入合法的手机号'));
       }
     return {
      //  获取用户列表得参数对象
      queryInfo:{
          query:'',
          //当前得页数
          pagenum:1,
          //当前每页显示多少条数据
          pagesize:1
       },
      userlist:[
        {id:1,name:'admin',email:'admin@qq.com',mobile:'13037175382',role_name:'超级管理员',mg_state:true},
        {id:2,name:'linken',email:'linken@qq.com',mobile:'15095691126',role_name:'测试角色2',mg_state:false},
        {id:3,name:'asdf1',email:'asdf1@qq.com',mobile:'13837175249',role_name:'主管',mg_state:true},
        {id:4,name:'asdf123',email:'asdf123@qq.com',mobile:'15091262541',role_name:'test',mg_state:false}
      ],
      total:4,
      //控制添加用户对话框得显示与隐藏
      addDialogVisible:false,
      //控制修改用户对话框得显示与隐藏
      editDialogVisible:false,
      //添加用户得表单数据
      addForm:{
        name:'',
        password:'',
        email:'',
        mobile:''
      },
      //添加表单得验证规则对象
      addFormRules:{
        name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
         password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ],
         email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            {validator: checkEmail, trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入手机', trigger: 'blur' },
            {validator: checkMobile, trigger: 'blur' }
          ]
      },
       //修改用户得表单数据(初始值值为查询到的用户信息对象)
      editForm:{
        name:'',
        email:'',
        mobile:''
      },
      //修改表单得验证规则对象
      editFormRules:{
         email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            {validator: checkEmail, trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入手机', trigger: 'blur' },
            {validator: checkMobile, trigger: 'blur' }
          ]
      }
     }
   },
   created(){
     //this.getUserList();
   },
   methods: {
      async getUserList(){
      //   const {data:res} = await this.axios.get('users',{ params:this.queryInfo );
      //   if(res.meta.status !==200) return this.$message.error('获取用户列表失败！');
      //   this.userlist = res.data.users;
      //   this.total = res.data.total;
      },

      //监听pagesize改变得事件
      handleSizeChange(newSize){
         //console.log(newSize);
         this.queryInfo.pagesize = newSize;
         //this.getUserList();
      },
      //监听页码值改变的事件
      handleCurrentChange(newPage){
         //console.log(newPage);
         this.queryInfo.pagenum = newPage;
         //this.getUserList();
      },
      //监听switch开关状态(保存在数据库中)得改变
    //  async userStateChange(userinfo){
    //    const {data:res} = await this.axios.put(`user/${userinfo.id}/state/${userinfo.mg_state}`);
    //    if(res.meta.status !== 200){
    //      userinfo.mg_state = !userinfo.mg_state;
    //      return this.$message.error('更新用户状态失败！');
    //    }  
    //    this.$message.success('更新数据状态成功！');  
    //  }
     userStateChange(userinfo){

     },
      //监听添加用户对话框的关闭事件
      addDialogClosed(){
        //this.$refs.addFormRef.resetFields();
      },
      //点击按钮，添加新用户（之前进行预校验）
      addUser(){
      //    this.$refs.addFormRef.validate(async valid => {
      //      if(!valid) return;
      //      //可以发起添加用户的网络请求
      //     const {data:res} = await this.axios.post('users',this.addForm);
      //     if(res.meta.status !== 201) {
      //      this.$message.error('添加用户失败！');
      //     } 
      //     this.$message.success('添加用户成功！');      
      //     //隐藏添加用户的对话框
      //     this.addDialogVisible = false;
      //     //重新获取用户列表数据
      //     this.getUserList();       
      //  })

      //=====模拟=======
      this.$refs.addFormRef.validate(valid => {
        if(!valid) return  this.$message.error('添加用户失败！');
        var len = this.userlist.length;
        this.addForm.id = len+1;
        this.userlist.push(this.addForm);
        this.total = len+1;
        this.$message.success('添加用户成功！');      
        //隐藏添加用户的对话框
        this.addDialogVisible = false;
      })
      },
      //展示编辑用户的对话框
    //  async showEditDialog(id){
    //    const {data:res} = await  this.axios.get('users/'+id);
    //    if(res.meta.status !== 200){
    //      return this.$message.error('查询用户信息失败！');
    //    }
    //    this.editForm = res.data;
    //    this.editDialogVisible = true;
    //   }

    //=======模拟=======
    showEditDialog(id){
       this.editForm = this.userlist[id-1];
       this.editDialogVisible = true;
    },
    //监听修改用户对话框的关闭事件
      editDialogClosed(){
        //this.$refs.addFormRef.resetFields();
      },
      //点击按钮，修改用户信息（之前进行预校验）
      editUser(){
      //    this.$refs.editFormRef.validate(async valid => {
      //      if(!valid) return;
      //      //可以发起修改用户的网络请求
      //     const {data:res} = await this.axios.post('users',this.addForm);
      //     if(res.meta.status !== 201) {
      //      this.$message.error('修改用户失败！');
      //     } 
      //     this.$message.success('修改用户成功！');      
      //     //隐藏修改用户的对话框
      //     this.editDialogVisible = false;
      //     //重新获取用户列表数据
      //     this.getUserList();       
      //  })

      //=====模拟=======
      this.$refs.editFormRef.validate(valid => {
        if(!valid){
          //隐藏修改用户的对话框
         this.editDialogVisible = false;
         return this.$message.error('更新用户信息失败！');
        }
        this.userlist[this.editForm.id-1].mobile = this.editForm.mobile;
        this.userlist[this.editForm.id-1].email = this.editForm.email;
        this.$message.success('更新用户信息成功！'); 
        //隐藏修改用户的对话框
        this.editDialogVisible = false;
      }) 
      },
      //根据id删除对应的用户信息
     async removeUserById(id){
        //弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        //如果用户确认删除，则返回值为字符串 confirm
        //如果用户取消了删除，则返回值为字符串 cancel
        if(confirmResult !== 'confirm') {
          return this.$message.info('已取消删除！');
        }  
        this.userlist.splice(id-1,1);
        this.total = this.userlist.length;
        this.$message.success('删除用户成功！');
     }
   }
}
</script>

<style scoped>

</style>